<!-- 💥  -->
<template>
	<splitpanes ref="splitpanesRef" class="layout-table-box">
		<pane :size="size" :min-size="minSize" :max-size="maxSize">
			<slot name="card"></slot>
		</pane>
		<pane class="table-box">
			<slot name="selectFilter"></slot>
			<slot name="proTable"></slot>
		</pane>
	</splitpanes>
</template>

<script setup lang="ts" name="LayoutTableBox">
import { ref, onMounted } from 'vue'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
const splitpanesRef = ref()
// 接收父组件参数并设置默认值
interface LayoutTableBoxProps {
	sizePx?: number // card宽度 ==> 非必传
	minSizePx?: number // card最小宽度 ==> 非必传
	maxSizePx?: number // card最大宽度 ==> 非必传
}
const props = withDefaults(defineProps<LayoutTableBoxProps>(), {
	sizePx: 300,
	minSizePx: 200,
	maxSizePx: 500
})
const size = ref(10)
const minSize = ref(20)
const maxSize = ref(30)
onMounted(() => {
	// 获取节点宽度
	const clientWidth = splitpanesRef.value.$el.clientWidth
	size.value = (props.sizePx / clientWidth) * 100
	minSize.value = (props.minSizePx / clientWidth) * 100
	maxSize.value = (props.maxSizePx / clientWidth) * 100
})
</script>
<style lang="scss">
.layout-table-box {
	display: flex;
	width: 100%;
	height: 100%;
	.select-box {
		padding: 4px 20px;
		margin-bottom: 10px;
	}
}
</style>
